<template>
  <div class="datetime">
    <van-field :readonly="element.readonly" :disabled="element.disabled" :required="element.required" clickable name="datetimePicker" :value="element.vModel" :label="element.label" :placeholder="element.placeholder" @click="datetimeClick" />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker :title="element.title" :value="element.vModel" :type="element.datetimeType" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>

<script>
import { timeOption } from '../../data'
import { mapMutations } from 'vuex'
import dayjs from 'dayjs'
export default {
  name: 'datetime',
  inject: ['element'],
  data() {
    return {
      value: '',
      showPicker: false
    }
  },
  computed: {
    formId() {
      return this.element.formId
    }
  },
  methods: {
    ...mapMutations('pageData', ['SETVMODEL']),
    onConfirm(time) {
      const datetimeType = this.element.datetimeType
      const format = timeOption.find(item => item.value === datetimeType)?.format
      // 格式化时间
      // 仅显示时间的时候不需要格式化时间
      const value = datetimeType !== 'time' ? dayjs(time).format(format) : time
      this.$emit('onConfirm', value)
      this.showPicker = false
    },
    datetimeClick() {
      if (this.element.disabled || this.element.readonly) return
      this.showPicker = true
    }
  }
}
</script>


<style lang="scss" scoped>
.van-cell:last-child::after {
  display: block;
}
</style>